<template>
	<view class="order">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<view class="header">
				<uni-segmented-control :current="current" :values="tabsList" styleType="text"
					@clickItem="changeTab($event)" activeColor="#007AFF"></uni-segmented-control>
			</view>

			<view class="order-list">
				<view class="order-item" v-for="(item,index) in orderList" :key="index"
					@click="pageRoute('/userPages/order/detail?id=' + item.id)">
					<view class="store">
						<view class="order-type">
							<text>{{item.order_type_str}}</text>
						</view>
						<view class="order-sn">
							<!-- <uni-icons type="shop-filled" size="20"><text>{{item.order_sn}}</text></uni-icons> -->
							<uni-icons type="icon-iconfont108" custom-prefix="iconfont" size="12">
								<text>{{item.order_sn}}</text>
							</uni-icons>
						</view>
						<view class="order-status">
							<text>{{item.status_str}}</text>
						</view>
					</view>

					<view class="product">
						<view class="product-item" v-for="(goods,index2) in item.goods_list" :key="index2">
							<u-image :src="$imageUrl(goods.logo)" width="120" height="120" radius="8"
								mode="aspectFit"></u-image>
							<view class="info">
								<view class="top">
									<text class="name u-line-2">{{goods.goods_name}}</text>
									<text class="price"
										v-if="goods && goods.member_price > 0">￥{{goods.member_price}}</text>
								</view>
								<view class="count">
									件数：{{goods.goods_num}}
								</view>
							</view>
						</view>
					</view>

					<view class="creatime">
						<text>下单时间：{{item.create_time}}</text>
					</view>

					<view class="total">
						<text>
							总价:<text v-if="item.use_points > 0">{{item.use_points}}积分</text>
							<text style="color: gray;" v-if="item.use_points > 0 && item.total_amount > 0">+</text>
							<text v-if="item.total_amount > 0">￥{{item.total_amount}}</text>
						</text>
						<text v-if="item.use_ticket">使用{{item.ticket_type_str}}{{item.quantity}}张抵扣</text>
						<text v-if="item.order_amount > 0">
							<text>实付:</text>
							<text v-if="item.use_points > 0">{{item.use_points}}积分</text>
							<text style="color: gray;" v-if="item.use_points > 0 && item.order_amount > 0">+</text>
							<text>￥{{item.order_amount}}</text>
						</text>
					</view>

					<view class="btn-group">
						<u-button class="btn" @tap="service(item)" v-if="item.buttons.master_btn == 1" size="medium"
							shape="circle">联系师傅</u-button>
						<u-button @click="order_action('cancel',item)" v-if="item.buttons.cancel_btn == 1" size="medium"
							shape="circle">取消订单</u-button>
						<u-button @click="order_action('comment',item)" v-if="item.buttons.comment_btn == 1"
							type="warning" size="medium" shape="circle">去评价</u-button>
						<u-button @click="order_action('pay',item)" v-if="item.buttons.pay_btn == 1" type="error"
							size="medium" shape="circle">去付款</u-button>
						<u-button @click="order_action('receive',item)" v-if="item.buttons.receive_btn == 1"
							type="primary" size="medium" shape="circle">确认收货</u-button>
						<u-button @click="order_action('return',item)"
							v-if="item.buttons.return_btn == 1 && item.order_type != 6" size="medium"
							shape="circle">退款</u-button>
						<u-button @click="order_action('shipping',item)" v-if="item.buttons.shipping_btn == 1"
							size="medium" shape="circle">查看物流</u-button>
						<u-button @click="order_action('qrcode',item)" v-if="item.buttons.qrcode_btn == 1"
							type="primary" size="medium" shape="circle">核销码</u-button>
					</view>
				</view>

				<view class="empty-data" v-if="orderList.length == 0 && isLogin">暂无数据~</view>
				<view class="empty-data" v-if="!isLogin">
					未登录状态，请<text style="padding: 0 10rpx; color: red;" @click="util.toLogin()">[登录]</text>后查看
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '订单',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isLogin: util.checkLogin(),
		current: 0,
		tabsList: ['全部', '待付款', '待发货', '待收货', '待评价', '已完成'],
		isMore: true,
		orderList: [],
		order_type: 0,
		is_free_queuing: 0,
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('order_type')) {
			state.order_type = opt.order_type;
		}
		if (opt.hasOwnProperty('is_free_queuing')) {
			state.is_free_queuing = opt.is_free_queuing;
		}
		console.log('登录状态', state.isLogin);
		getOrderList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getOrderList() {
		let params = {
			current: state.current,
			order_type: state.order_type,
			is_free_queuing: state.is_free_queuing,
			skip: state.orderList.length,
		}
		/* request.get('order/orderList', params).then(res => {
			state.isMore = res.data.is_more;
			if (state.orderList.length == 0) {
				state.orderList = res.data.list;
			} else {
				state.orderList = state.orderList.concat(res.data.list);
			}
		}) */
		state.orderList = [{
			id: 1,
			order_type: 1,
			order_type_str: '酒店',
			order_sn: 'order_20250827141000182',
			status: 2,
			status_str: '已支付',
			goods_list: [{
				id: 1,
				goods_name: '云南山泉16.9L',
				member_price: '18.00',
				goods_num: 6,
				logo: '/uploads/images/202510/15/filee1b1c50fcedb54ddbd9f5c369b5f80091076.jpg'
			}],
			create_time: '2025-08-27 14:10:00',
			use_points: 0,
			total_amount: '108.00',
			order_amount: '108.00',
			use_ticket: {},
			buttons: {
				master_btn: 1,
				cancel_btn: 1,
				comment_btn: 0,
				pay_btn: 0,
				receive_btn: 0,
				return_btn: 1,
				shipping_btn: 0,
				qrcode_btn: 1
			}
		}, {
			id: 2,
			order_type: 3,
			order_type_str: '订水',
			order_sn: 'order_20250827141000182',
			status: 2,
			status_str: '已支付',
			goods_list: [{
				id: 1,
				goods_name: '云南山泉16.9L',
				member_price: '18.00',
				goods_num: 6,
				logo: '/uploads/images/202510/15/filee1b1c50fcedb54ddbd9f5c369b5f80091076.jpg'
			}],
			create_time: '2025-08-27 14:10:00',
			use_points: 0,
			total_amount: '108.00',
			order_amount: '108.00',
			use_ticket: {},
			buttons: {
				master_btn: 1,
				cancel_btn: 1,
				comment_btn: 0,
				pay_btn: 0,
				receive_btn: 0,
				return_btn: 1,
				shipping_btn: 0,
				qrcode_btn: 1
			}
		}];
	}

	//联系客服
	function service(item) {
		console.log('联系水工', item);
		if (item.master) {
			/* this.kefu = item.master.mobile;
			this.$refs.contactRef.show(); */
		}
	}

	// 操作订单
	function order_action(action, data) {
		let params = {
			action: action,
			id: data.id,
		}

		// 取消订单
		if (action == "cancel") {
			uni.showModal({
				content: "确认取消订单?",
				success(res) {
					if (res.confirm) {
						/* request.post("order/action", params)
							.then(res2 => {
								util.showTip(res2.msg);
								state.isMore = true;
								state.orderList = [];
								getOrderList();
							})
							.catch(err => {
								util.showTip(err.msg)
							}) */
					}
				}
			})
		}
		// 评论
		else if (action == "comment") {
			pageRoute(`/pages/product/evaluate?id=${data.id}`)
		}
		// 跳转支付
		else if (action == "pay") {
			this.goPayPage('order_type=order&order_id=' + this.data.id);
		}
		// 确认收货
		else if (action == "receive") {
			uni.showModal({
				content: "确认订单已经收到货?",
				success(res) {
					if (res.confirm) {
						request.post("order/action", params)
						/* .then(res2 => {
							util.showTip(res2.msg);
							state.isMore = true;
							state.orderList = [];
							getOrderList();
						})
						.catch(err => {
							util.showTip(err.msg)
						}) */
					}
				}
			})
		}
		// 退款
		else if (action == "return") {
			if (data.order_type === 4) {
				util.showTip('请在我的水票中心发起退款');
				setTimeout(() => {
					pageRoute(`/userPages/water-tickets/water-tickets?current=1`);
				}, 800);
			} else {
				console.log('正常退款');
				pageRoute(`/userPages/return/return?id=${data.id}`);
			}
		}
		// 查物流
		else if (action == "shipping") {
			pageRoute(`/userPages/shipping/shipping?id=${data.id}`);
		}
		// 核销码
		else if (action == "qrcode") {
			pageRoute(`/userPages/order/qrcode?id=${data.id}`);
		} else {
			console.log("异常类型:" + action);
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isLogin,
		current,
		tabsList,
		isMore,
		orderList,
		order_type,
		is_free_queuing,
	} = toRefs(state);
</script>

<style lang="scss">
	.order {
		.content {
			.header {
				background-color: #fff;
			}

			.order-list {
				padding: $m24;

				.order-item {
					margin-bottom: $m24;
					padding: 0 $m24;
					background-color: #fff;
					border-radius: $radius-12;

					.store {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: $m20 0;

						.order-type {
							padding: 8rpx 16rpx;
							background: #d3dff7;
							border-radius: 10rpx;

							text {
								font-size: 24rpx;
								color: #125cd7;
							}
						}

						.order-sn {
							flex: 1;
							align-items: center;
							margin: 0 0 0 20rpx;
							line-height: 24rpx;

							text {
								margin-left: 10rpx;
							}
						}

						.order-status {
							text {
								color: #fa3534;
							}
						}
					}

					.product {
						padding: $m16 0;
						margin: 0 0 $m16 0;
						border-bottom: 1rpx solid #f7f7fb;

						.product-item {
							@include f-between;

							.info {
								flex: 1;
								position: relative;
								margin-left: $m24;
								height: 120rpx;

								.top {
									@include f-between;

									.name {
										flex: 1;
										margin-right: $m24;
										font-size: $font-30;
										font-weight: bold;
										color: $u-main-color;
									}

									.price {
										font-size: $font-32;
										font-weight: bold;
										color: $u-main-color;
									}
								}

								.count {
									position: absolute;
									bottom: 0;
									width: 100%;
									font-size: $font-24;
									color: $u-tips-color;
								}
							}
						}
					}

					.creatime {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 0 0 10rpx 0;

						text {
							color: $u-tips-color;
							font-size: $font-24;
						}
					}

					.total {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.total {
						text {
							color: #fa3534;
							font-size: $font-24;
							font-weight: bold;
						}
					}

					.btn-group {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: $m24 0;

						.btn {}
					}
				}

				.empty-data {
					margin-bottom: $m24;
					padding: $m24;
					border-radius: $radius-16;
					text-align: center;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>